<template>
  <div class="home">
    <div v-for="n in 100">
      <HeavyComp v-if="defer(n)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue';
import HeavyComp from '@/components/HeavyComp.vue';
import { useDefer } from './useDefer'

const defer = useDefer()
</script>
<style scoped lang="less">
.home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}
</style>
